<template>
	<view class="pets">
		<view class="box">
			<view class="title">
				宠物身份证
			</view>
			<view class="sub">
				蚂蚁宠物鼻纹识别技术
			</view>
			<view class="card flex-a">
				<view class="pic">
					<image src="../../../static/pic/pets.png" mode="widthFix" />
				</view>
				<view class="info">
					<view class="name">{{baseFormData.petName?baseFormData.petName:'昵称'}}</view>
					<view class="sex">性别<text>{{baseFormData.petSex==0?'弟弟':baseFormData.petSex==1?'妹妹':''}}</text></view>
					<view class="bir">生日<text>{{baseFormData.petDate}}</text></view>
				</view>
			</view>
		</view>
		<view class="perfect-info">
			<view class="head">请完善宠物信息</view>
			<view class="example">
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms ref="baseForm" :rules="rules" :modelValue="baseFormData" label-width="80px">
					<uni-forms-item label="种类" required name="petType">
						<uni-data-checkbox v-model="baseFormData.petType" :localdata="types" />
					</uni-forms-item>
					<uni-forms-item label="昵称" required name="petName">
						<uni-easyinput v-model="baseFormData.petName" placeholder="请输入爱宠昵称" />
					</uni-forms-item>
					<uni-forms-item label="品种" required name="petVar">
						<uni-easyinput v-model="baseFormData.petVar" placeholder="请输入爱宠品种" />
					</uni-forms-item>
					<uni-forms-item label="生日" required name="petDate">
						<uni-datetime-picker type="date" v-model="baseFormData.petDate" />
					</uni-forms-item>
					<uni-forms-item label="性别" required name="petSex">
						<uni-data-checkbox v-model="baseFormData.petSex" :localdata="sexs" />
					</uni-forms-item>
					<uni-forms-item label="绝育情况" required name="petSter">
						<uni-data-checkbox v-model="baseFormData.petSter" :localdata="states" />
					</uni-forms-item>
					<uni-forms-item label="狗狗照片" required name="petPhoto">
						<view class="flex-a">
							<view style="margin-right: 20rpx;">
								<view>
									<view v-if="!baseFormData.petAllPhoto" class="upload" @click="allUpload">+</view>
									<view v-else><image :src="baseFormData.petAllPhoto" mode="widthFix"></image></view>
								</view>
								<view class="txt">全身照</view>
							</view>
							<view>
								<view>
									<view v-if="!baseFormData.petPhoto" class="upload" @click="faceUpload">+</view>
									<view v-else><image :src="baseFormData.petPhoto" mode="widthFix"></image></view>
								</view>
								<view class="txt">正脸照</view>
							</view>
						</view>
					</uni-forms-item>
					<view class="kefu">
						<uni-icons type="headphones" size="20" color="#4080C8"></uni-icons>
						<text>在线客服</text>
					</view>
					<button type="primary" @click="submit('baseForm')">领取宠物身份证</button>
				</uni-forms>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		HTTP_ADMIN_URL
	} from '@/config/app';
	import {
		addPetInfo
	} from '../../../api/pet.js'
	export default {
		data() {
			return {
				baseFormData: {
					petName: '',
					petType: '',
					petDate: '',
					petSter: '',
					petPhoto: '',
					petAllPhoto: ''
				},
				types: [{
					text: '猫猫',
					value: 0
				}, {
					text: '狗狗',
					value: 1
				}],
				sexs: [{
					text: '公',
					value: 0
				}, {
					text: '母',
					value: 1
				}],
				states: [{
					text: '未绝育',
					value: 0
				}, {
					text: '已绝育',
					value: 1
				}, {
					text: '未知',
					value: 2
				}],
				// 校验规则
				rules: {
					petName: {
						rules: [{
							required: true,
							errorMessage: '昵称不能为空'
						}]
					},
					petType: {
						rules: [{
							required: true,
							errorMessage: '种类至少勾选一个'
						}]
					},
					petVar: {
						rules: [{
							required: true,
							errorMessage: '品种不能为空'
						}]
					},
					petDate: {
						rules: [{
							required: true,
							errorMessage: '生日不能为空'
						}]
					},
					petSex: {
						rules: [{
							required: true,
							errorMessage: '性别至少勾选一个'
						}]
					},
					petSter: {
						rules: [{
							required: true,
							errorMessage: '请勾选绝育情况'
						}]
					},
					petPhoto: {
						rules: [{
							required: true,
							errorMessage: '照片不能为空'
						}]
					},
				},
			}
		},
		methods: {
			// 领取宠物身份证
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					addPetInfo(this.baseFormData).then(res=>{
						if(res.code==200){
							uni.showToast({
								title: '领取成功',
								icon:'success',
								duration: 2000
							});
						}
					})
				}).catch(err => {
					console.log(err)
				})
			},
			//全身照
			allUpload() {
				var that=this
				that.$util.uploadImageOne({
					url: 'user/upload/image',
					name: 'multipart',
					model: "product",
					pid: 1
				}, function(res) {
					that.baseFormData.petAllPhoto=res.data.url
				});
			},
			//正脸照
			faceUpload(){
				var that=this
				that.$util.uploadImageOne({
					url: 'user/upload/image',
					name: 'multipart',
					model: "product",
					pid: 1
				}, function(res) {
					that.baseFormData.petPhoto=res.data.url
				});
			}
		}
	}
</script>

<style lang="scss">
	page,
	body {
		height: 100%;
		background: $uni-bg-color-grey;
	}

	.pets {
		.box {
			padding: 20rpx 50rpx;

			.title {
				font-size: 50rpx;
				font-weight: bold;
				color: #2B3033;
			}

			.sub {
				font-size: 24rpx;
				color: #293537;
				font-weight: bold;
				letter-spacing: 6rpx;
				margin: 10rpx 0 20rpx;
			}

			.card {
				border-radius: 20rpx;
				background: #FC6B73;
				padding: 40rpx 50rpx;

				.pic {
					image {
						width: 200rpx;
					}
				}

				.info {
					view {
						margin-bottom: 10rpx;
						letter-spacing: 4rpx;

						text {
							display: inline-block;
							width: 100rpx;
							height: 30rpx;
							line-height: 30rpx;
							padding-left: 10rpx;
							background: #F59DA2;
							border-radius: 5rpx;
							margin-left: 20rpx;
						}
					}

					.name {
						color: #fff;
						font-weight: bold;
						font-size: 30rpx;
					}

					.sex {
						color: rgba(255, 255, 255, 0.7);
					}

					.bir {
						color: rgba(255, 255, 255, 0.7);

						text {
							width: 200rpx;
						}
					}
				}
			}
		}

		.perfect-info {
			padding: 0 40rpx 20rpx;

			.head {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
				letter-spacing: 4rpx;
				margin-bottom: 20rpx;
			}

			.example {
				.upload {
					color: #EA9973;
					font-size: 44rpx;
					width: 120rpx;
					text-align: center;
					height: 120rpx;
					line-height: 120rpx;
					background: #F8F8F8;
					border-radius: 10rpx;
				}

				image {
					width: 100rpx;
					height: 100rpx;
				}
			}

			.segmented-control {
				margin-bottom: 15px;
			}

			.button-group {
				margin-top: 15px;
				display: flex;
				justify-content: space-around;
			}

			.form-item {
				display: flex;
				align-items: center;
			}

			.button {
				display: flex;
				align-items: center;
				height: 35px;
				margin-left: 10px;
			}

			button {
				background: #1777FF;
				height: 80rpx;
				line-height: 80rpx;
				letter-spacing: 8rpx;
				font-size: 30rpx;
			}

			.uni-data-checklist {
				top: 10rpx;
			}

			.example-body {
				padding: 10px;
				padding-top: 0;
			}

			.txt {
				color: #9E9E9E;
				font-size: 22rpx;
				margin-top: 10rpx;
				text-align: center;
			}

			.kefu {
				text-align: center;
				color: #4080C8;
				font-size: 30rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>
